<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Metro 4 - Popular HTML, CSS and JS library</title>

</head>
<body class="m4-cloak" style="padding-top: 52px">
    <div class="container-fluid pos-fixed fixed-top z-top bg-hero" id="header">
        <header class="app-bar container bg-transparent fg-white pos-relative" data-role="appbar" data-expand-point="md">
            <a href="index.html" class="brand fg-white no-hover text-bold">METRO_4</a>
            <ul class="app-bar-menu ml-auto text-upper">
                <li><a href="intro.html" class="app-bar-item">Get Started</a></li>
                <li><a href="m4q-about.html" class="app-bar-item">Components</a></li>
                <li><a href="examples.html" class="app-bar-item">Examples</a></li>
                <li><a href="support.html" class="app-bar-item">Support</a></li>
                <li><a href="https://github.com/olton/Metro-UI-CSS" class="app-bar-item">GitHub</a></li>
            </ul>
        </header>
    </div>

    <div class="hero hero-bg text-center neb1 neb-hero" id="hero">

        <div class="display4 fg-white"><span class="reduce-3 enlarge-3-md">Metro_4</span></div>

        <h4 class="text-center fg-white text-upper text-light">Impressive components library<span class="d-none-md1"><br></span> built on HTML, CSS, JavaScript</h4>

        <div class="text-center mt-8">
            <a href="intro.html" class="button bg-transparent bg-darkRed-hover fg-white m-1 text-upper outline bd-lightRed">Get started</a>
            <a href="https://github.com/olton/Metro-UI-CSS" class="button bg-transparent bg-darkRed-hover fg-white m-1 text-upper outline bd-lightRed">Source Files</a>
            <a href="https://builder.metroui.org.ua" class="button bg-transparent bg-darkRed-hover fg-white m-1 text-upper outline bd-lightRed">Build own set</a>
        </div>

        <div class="d-flex flex-justify-center flex-align-center mt-6 mb-6 text-small">
            <a href="https://github.com/olton/Metro-UI-CSS/watchers" class="m-1 fg-gray no-decor fg-white-hover transition"><span class="mif-eye"></span> <span id="github-watchers" data-role="counter" data-start-on-viewport="false">0</span></a>
            <a href="https://github.com/olton/Metro-UI-CSS/stargazers" class="enlarge-2x m-1 fg-lightGray no-decor fg-white-hover transition"><span class="mif-star-full"></span> <span id="github-stars" data-role="counter" >0</span></a>
            <a href="https://github.com/olton/Metro-UI-CSS/network/members" class="m-1 fg-gray no-decor fg-white-hover transition"><span class="mif-flow-tree"></span> <span id="github-forks" data-role="counter" >0</span></a>
        </div>

        <div class="text-center">
            <img class="m-1" src="https://img.shields.io/github/v/release/olton/Metro-UI-CSS?color=darkLime&style=for-the-badge"/>
            <img class="m-1" src="https://img.shields.io/nuget/v/Metro4.svg?color=darklime&style=for-the-badge"/>
            <img class="m-1" src="https://img.shields.io/npm/v/metro4?color=darkLime&label=npm&style=for-the-badge"/>
        </div>
    </div>

    <div class="container-fluid bg-white fg-dark pt-10 pb-20 neb neb-white">
        <div class="container text-center" id="feature-table-wrapper">

            <div class="feature-table row mt-10">
                <div class="cell-md-4">
                    <div class="info-panel rounded no-overflow shadow-3">
                        <div class="info-panel-header bg-green fg-white">Open Source</div>
                        <div class="info-panel-content">
                            <div class="mx-10 my-6"><span class="mif-file-code mif-8x fg-green"></span></div>
                            <span class="text-leader2">Metro 4 is an open source project</span>
                        </div>
                        <div class="info-panel-footer">
                            <a href="download.html" class="button large outline success rounded">Download</a>
                        </div>
                    </div>
                </div>
                <div class="cell-md-4">
                    <div class="info-panel rounded no-overflow shadow-3">
                        <div class="info-panel-header bg-steel fg-white">Easy to use</div>
                        <div class="info-panel-content">
                            <div class="mx-10 my-6"><span class="mif-rocket mif-8x fg-steel"></span></div>
                            <span class="text-leader2">To use Metro 4 you do not even need to know javascript</span>
                        </div>
                        <div class="info-panel-footer">
                            <a href="intro.html" class="button large outline secondary rounded">Get started</a>
                        </div>
                    </div>
                </div>
                <div class="cell-md-4">
                    <div class="info-panel rounded no-overflow shadow-3">
                        <div class="info-panel-header bg-orange fg-white">For developers</div>
                        <div class="info-panel-content">
                            <div class="mx-10 my-6"><span class="mif-github mif-8x fg-orange"></span></div>
                            <span class="text-leader2">Metro 4 is easily expandable to your own needs</span>
                        </div>
                        <div class="info-panel-footer">
                            <a href="https://github.com/olton/Metro-UI-CSS" class="button large outline warning rounded">Get source</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="container-fluid bg-light pt-10 pb-20 neb neb-light">
        <div class="container text-center">
            <div class="h1 m-10"><span class="reduce-1 enlarge-1-md">What is it?</span></div>
            <div class="text-leader">
                <p class="reduce-1 enlarge-1-md pl-5-fs pr-5-fs pl-20-md pr-20-md">
                    Metro 4 is an open source toolkit for developing with HTML, CSS, and JS.
                    Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins.
                </p>
            </div>
            <hr class="mt-10 mb-10 w-50" style="background-color: #E1E1E1">
            <!-- ads-html -->
            <div class="example p-0 no-border"></div>
            <hr class="mt-10 mb-10 w-50" style="background-color: #E1E1E1">
            <div class="text-leader2">
                <p class="reduce-1 enlarge-1-md pl-5-fs pr-5-fs pl-20-md pr-20-md">
                    Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style and not only.
                </p>
            </div>
        </div>
    </div>

    <div class="container-fluid feature-bg pt-10 pb-20 neb neb-feature">
        <div class="container text-center">
            <div class="h1 mt-10"><span class="reduce-1 enlarge-1-md">All the Features You Need</span></div>
            <div class="h4 text-light"><span class="reduce-1 enlarge-1-md">With Metro 4 you get:</span></div>

            <div class="row mt-12">
                <div class="cell-md-4 mt-4">
                    <div><span class="mif-embed2 mif-8x"></span></div>
                    <h4 class="fg-white mt-4">Base styles</h4>
                    <p>
                        Metro 4 includes various styles for changing the appearance of html elements.
                    </p>
                </div>
                <div class="cell-md-4 mt-4">
                    <div><span class="mif-library mif-8x"></span></div>
                    <h4 class="fg-white mt-4">100+ Components</h4>
                    <p>
                        More than 100 components are available to you to solve almost all tasks.
                    </p>
                </div>
                <div class="cell-md-4 mt-4">
                    <div><span class="mif-cogs mif-8x"></span></div>
                    <h4 class="fg-white mt-4">Tools and Routines</h4>
                    <p>
                        Various built-in tool functions and classes will increase your productivity.
                    </p>
                </div>
            </div>

            <div class="row mt-12">
                <div class="cell-md-4 mt-4">
                    <div><span class="mif-bug mif-8x"></span></div>
                    <h4 class="fg-white mt-4">Issues</h4>
                    <p>
                        Rapid response to detected bugs and their elimination.
                    </p>
                </div>
                <div class="cell-md-4 mt-4">
                    <div><span class="mif-help mif-8x"></span></div>
                    <h4 class="fg-white mt-4">Guide</h4>
                    <p>
                        Detailed description of all elements of the Metro 4 library.
                    </p>
                </div>
                <div class="cell-md-4 mt-4">
                    <div><span class="mif-bubbles mif-8x"></span></div>
                    <h4 class="fg-white mt-4">Forum</h4>
                    <p>
                        Get additional help from the community on the Metro 4 forum.
                    </p>
                </div>
            </div>

        </div>
    </div>

    <div class="container-fluid bg-white fg-dark neb neb-white">
        <div class="container pt-10 pb-10">
            <div class="h1 text-center"><span class="reduce-1 enlarge-1-md">Support</span></div>
            <p class="text-leader text-center pl-10-md pr-10-md">
                When using Metro 4 in a large project, core to your project or company, you want to be assured that
                Metro 4 and its extensions will be actively maintained with enhanced features being added to the core library, new extensions developed.
                Any issues that are found being resolved quickly and efficiently, if a project has financial support.
            </p>

            <div class="text-center mt-10">
                <a href="https://www.patreon.com/bePatron?u=8975658" class="button alert large text-upper d-inline-flex flex-align-center flex-justify-center"><img src="images/patreon.png" class="mr-2"> Become a Sponsor</a>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-light fg-dark neb neb-light">
        <div class="container pt-10 pb-20">
            <div class="h1 text-center mb-10"><span class="reduce-1 enlarge-1-md">Who uses</span></div>

            <div data-role="carousel" class="who-uses bg-transparent" data-height="180" data-controls="false" data-auto-start="true">
                <div class="slide">
                    <a href="https://iforum.ua"><img src="images/iforum.svg"></a>
                </div>
                <div class="slide">
                    <a href="https://software.openbuilds.com/"><img src="images/OpenBuilds_logo.png"></a>
                </div>
                <div class="slide">
                    <a href="https://interactivity.com.ua/"><img src="images/Interactivity.png"></a>
                </div>
                <div class="slide">
                    <a href="https://mirohost.net/"><img src="images/mirohost_logo.svg"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-white fg-dark neb neb-white">
        <div class="container pt-10 pb-10">
            <div class="h3 text-light text-center"><span class="reduce-1 enlarge-1-md">Technical support</span></div>

            <div class="row special-thanks">
                <div class="cell-md-2">
                    <a href="https://olshansky.ua/"><img src="images/olshansky.svg" alt="Olshansky and Co"></a>
                </div>
                <div class="cell-md-2">
                    <a href="https://www.imena.ua/"><img src="images/imena_logo.png" alt="Imena.ua"></a>
                </div>
                <div class="cell-md-2">
                    <a href="https://mirohost.net/"><img src="images/mirohost_logo.svg" alt="Mirohost.net"></a>
                </div>
                <div class="cell-md-2">
                    <a href="https://www.keycdn.com/"><img src="images/keycdn-logo.svg" alt="keycdn.com"></a>
                </div>
                <div class="cell-md-2">
                    <a href="https://www.jetbrains.com/"><img src="images/jetbrains.svg" alt="jetbrains.com"></a>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer-bg">
        <div class="container pt-20 pb-20">
            <div class="text-center">
                <ul class="inline-list reduce-1" id="social-menu">
                    <li><a class="" href="https://www.facebook.com/groups/metro4.libary/"><span class="mif-facebook"></span></a></li>
                    <li><a class="" href="https://twitter.com/MetroUI"><span class="mif-twitter"></span></a></li>
                    <li><a class="" href="#"><span class="mif-youtube"></span></a></li>
                    <li><a class="" href="https://github.com/olton/Metro-UI-CSS"><span class="mif-github"></span></a></li>
                </ul>
            </div>

            <div class="text-center mt-10">
                <ul class="inline-list reduce-1" id="footer-menu">
                    <li><a class="" href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">License</a></li>
                    <li><a class="" href="https://pimenov.com.ua">Author</a></li>
                    <li><a class="" href="https://forum.metroui.org.ua">Forum</a></li>
                    <li><a class="" href="https://github.com/olton/Metro-UI-CSS/issues">Issues</a></li>
                    <li><a class="" href="https://github.com/olton/Metro-UI-CSS/releases">Releases</a></li>
                </ul>
            </div>

            <div class="text-center m-10">
                <span class="h2"><span class="fg-cyan">Made in </span><span class="fg-yellow">Ukraine</span></span>
            </div>

            <div class="text-center mt-10 reduce-1">
                Metro 4 (Metro UI CSS) &copy; 2012-2020 by <a href="https://pimenov.com.ua" class="no-wrap">Serhii Pimenov</a>.
                <br />
                <span class="no-wrap">Domain by <a class href="https://imena.ua/">Imena.ua</a>.</span>
                <span class="no-wrap">Hosting by <a class href="https://mirohost.net/">Mirohost</a>.</span>
                <br/>
                <span class="no-wrap">Metro CDN by <a class href="https://www.keycdn.com/">KeyCDN</a>.</span>
                <br/>
                <span class="no-wrap">IDE PhpStorm by <a  class href="https://www.jetbrains.com/">JetBrains</a>.</span>
                <br />
                Docs version <span class="docs-version">2020.1</span>. Code licensed <a class href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">MIT</a>, docs <a class href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
            </div>
        </div>
    </footer>

<!--     -->

<!--    -->
    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script>
        $(function(){
            Metro.utils.github("olton/Metro-UI-CSS", function(data){
                var forks = $("#github-forks").attr("data-value", data.forks);
                var stars = $("#github-stars").attr("data-value", data.stargazers_count);
                var subs = $("#github-watchers").attr("data-value", data.subscribers_count);

                setTimeout(function(){
                    Metro.getPlugin(forks, "counter").start();
                    Metro.getPlugin(stars, "counter").start();
                    Metro.getPlugin(subs, "counter").start();
                })
            });
        });

        $(window).on("adblock-alert", function(){
            setTimeout(function(){
                Metro.createToast("At the moment, advertising is almost the only source of financing for the project. By the way, this block is shown by the built-in Metro 4! Please disable ad blocker and support Metro 4!", null, null, "info", {
                    showTop: true,
                    distance: 60,
                    timeout: 10000
                });
            }, 2000);
        })

    </script>

    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->

</body>
</html>